<template>
  <div class="reserve-manager">
    <div class="box">
      <div class="header">
        <div class="header-item">
          <label class="item-text">预约状态：</label>
          <el-select 
            v-model="queryParams.appointment_status" 
            placeholder="请选择预约状态"
            clearable
            @change="handleStatusChange">
            <el-option label="待接受" :value="0" />
            <el-option label="已接受" :value="1" />
            <el-option label="已拒绝" :value="2" />
            <el-option label="已完成" :value="3" />
            <el-option label="咨询者请求取消" :value="4" />
            <el-option label="咨询师请求取消" :value="5" />
            <el-option label="已取消" :value="6" />
          </el-select>
        </div>
        <div class="header-item">
          <label class="item-text">申请日期：</label>
          <el-date-picker
            v-model="queryParams.request_time"
            type="date"
            placeholder="选择申请日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            clearable
            @change="handleDateChange"
          />
        </div>
        <div class="header-item">
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </div>
      </div>

      <div class="content">
        <ReserveTable 
          ref="tableRef"
          :query-params="queryParams"
          @refresh="getReserveList" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import ReserveTable from './reserveTable.vue'
import type { QueryParams } from '@/api/appointment_info/types'
import { useUserInfoStore } from '@/stores/info'
import { debounce } from 'lodash-es'

const userInfoStore = useUserInfoStore()
const tableRef = ref()

// 查询参数
const queryParams = reactive<QueryParams>({
  Page: 1,
  Size: 10,
  counselor_id: userInfoStore.userInfo.user_id,
  appointment_status: undefined,
  request_time: '',
  is_delete: 0
})

// 状态变化处理
const handleStatusChange = (_value: number | undefined) => {
  queryParams.Page = 1
  debouncedSearch()
}

// 日期变化处理
const handleDateChange = (_value: string | undefined) => {
  queryParams.Page = 1
  debouncedSearch()
}

// 防抖处理
const debouncedSearch = debounce(() => {
  getReserveList()
}, 300)

// 搜索
const handleSearch = () => {
  queryParams.Page = 1
  getReserveList()
}

// 重置
const handleReset = () => {
  queryParams.appointment_status = undefined
  queryParams.request_time = ''
  queryParams.Page = 1
  getReserveList()
}

// 获取预约列表
const getReserveList = () => {
  if (tableRef.value) {
    tableRef.value.getAppointmentList()
  }
}

// 监听查询参数变化
watch(
  () => [queryParams.appointment_status, queryParams.request_time],
  () => {
    debouncedSearch()
  },
  { deep: true }
)
</script>

<style scoped>
.reserve-manager {
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.box {
  height: 100%;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.header-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.item-text {
  font-size: 14px;
  color: #606266;
  white-space: nowrap;
}

.content {
  height: calc(100% - 60px);
}

:deep(.el-select),
:deep(.el-date-picker) {
  width: 200px;
}

:deep(.el-button) {
  padding: 8px 20px;
}
</style>
